<!--
 * @Description: 第十七章（插槽slot） 作用域插槽
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 11:33:56
-->
<template>
  <div>
    <p>第十七章（插槽slot）</p>
    <div>
      <p>作用域插槽</p>
      <Dialog>
        <template v-slot:header>
          <div>
            <p>我是具名插槽，我被插入上面 太刺激了！</p>
          </div>
        </template>
        <!-- <template v-slot="{ index, data }"> -->
        <!-- v-slot 可以简写， v-slot="{index, data}" 也可以用以下方式写 -->
        <template #default="{ index, data }">
          <div>
            <p>{{ index }} : {{ data.name }} -- {{ data.age }}</p>
          </div>
        </template>
        <!-- v-slot 可以简写， v-slot:footer = #footer -->
        <template #footer>
          <div>
            <p>我是具名插槽，我被插入下面 太刺激了！</p>
          </div>
        </template>
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import Dialog from '@/components/17th/dialog/2.vue'
</script>
<style scoped></style>
